<template>
  <div class="ladder_goods_area" v-if="dataSoures">
    <van-list :loading.sync="loading" class="van_list" :finished="finished" finished-text="没有更多商品信息了" @load="load">
      <div class="item_block" v-for="(item, index) of dataSoures" :key="index">
        <!-- //119当天样式、 -->
        <div class='box' v-if="is119" @click="goToDetail(item)">
          <img v-if="item.tieredPricingRules&&item.tieredPricingRules[0].priceCeil==0&&item.tieredPricingRules[0].priceFloor==0" src="https://image.hezongyy.com/pcimage/119h5/app_ladder.png"
            alt="" />
          <img v-else src="https://image.hezongyy.com/pcimage/119h5/active_ladder.png" alt="" />
          <div class='box_price1'>
            <div class='tip' v-if="item.sellingPrice!=-1">￥</div>
            <div class='price' v-html="getSellingPrice(setPrice.setPriceNoTip(item.sellingPrice))"></div>
          </div>
        </div>
        <div class='box' v-if="!is119&&!isPreview">
          <!-- <img src="https://image.hezongyy.com/pcimage/20211109img/jtj_h5_119jx.png" alt="" /> -->
          <!-- <div class='box_price1'>119精选</div> -->
        </div>
        <!-- 预览时候样式 -->
        <div class="box" v-if="isPreview" @click.stop="goToDetail(item)">
          <img v-if="item.tieredPricingRules&&item.tieredPricingRules[0].priceCeil==0&&item.tieredPricingRules[0].priceFloor==0" src="https://image.hezongyy.com/pcimage/119h5/app_ladder.png"
            alt="" />
          <img v-else src="https://image.hezongyy.com/pcimage/119h5/active_ladder.png" alt="" />
        </div>
        <div class='box_price' v-if="isPreview">
          <div class='tip' v-if="item.sellingPrice!=-1">￥</div>
          <div class='price' v-html="getSellingPrice(setPrice.setPriceNoTip(item.sellingPrice))"></div>
        </div>
        <div class="left">
          <img :src="
              item.picture
                ? item.picture
                : 'https://image.hezongyy.com/images/no_picture.gif'
            " />
          <img class="tip" v-if="item.quantity <= 0" src="https://image.hezongyy.com/pcimage/119h5/ysq.png" />
        </div>
        <div class="right">
          <div class="right_text" @click="goToDetail(item)">
            <div class="text1">{{ item.name }}</div>
            <div class="label_img" v-if="item.nationalDrugCode">
              <img class="img2" src="https://image.hezongyy.com/pcimage/119h5/h5_gjm_new.png" alt="" />
            </div>
            <div class="label_img" v-for="(labelId, index) of item.label" :key="index" v-show="getLabelImg(labelId)">
              <img class="img1" :src="getLabelImg(labelId)" />
            </div>
            <div class="text2">{{ item.manufacturerName }}</div>
            <div class="text2">规格：{{ item.specification }}</div>
            <div class="text2">效期：{{ item.expirationDate }}</div>
          </div>

          <!-- 119  7号8号样式 -->
          <div v-if='isPreview'>
            <div class="text31">
              <span class='zxj119'>119专享价</span>
              <span class="num"> {{ setPrice.setPrice(item.sellingPrice)}}</span>
              <span class="num1" v-show="item.sellingPrice != -1">¥{{ item.retailPrice }}</span>
              <span class="btn">
                <img v-if="item.sellingPrice==-1||item.quantity <= 0" src="@/assets/image/jiagou1.png" />
                <img v-else @click="showCards(item)" src="@/assets/image/jiagou.png" />
              </span>
            </div>
            <div class="couponAfterPrice1" v-if="
                item.sellingPrice != -1 &&
                  item.tieredPricingRules[0] &&
                  item.tieredPricingRules[0].priceFloor > 0 &&
                  item.tieredPricingRules[0].priceCeil > 0
              ">
              券后 {{ "¥" + item.tieredPricingRules[0].priceFloor }}-{{
                "¥" + item.tieredPricingRules[0].priceCeil
              }}
            </div>
            <div class="couponAfterPrice1" v-if="
                item.sellingPrice != -1 &&
                  item.tieredPricingRules[0] &&
                  item.tieredPricingRules[0].priceFloor == 0 &&
                  item.tieredPricingRules[0].priceCeil > 0
              ">
              券后{{ "¥" + item.tieredPricingRules[0].priceCeil }}
            </div>
          </div>
          <!-- //119当天样式 -->
          <div class="text3" v-else>
            <span class="num">{{ setPrice.setPrice(item.sellingPrice) }}</span>
            <span class="num1" v-show="item.sellingPrice != -1">¥{{ item.retailPrice }}</span>
            <span class="btn">
              <img v-if="item.sellingPrice==-1||item.quantity <= 0" src="@/assets/image/jiagou1.png" />
              <img v-else @click="showCards(item)" src="@/assets/image/jiagou.png" />
            </span>
            <div class="couponAfterPrice" v-if="
                item.sellingPrice != -1 &&
                  item.tieredPricingRules[0] &&
                  item.tieredPricingRules[0].priceFloor > 0 &&
                  item.tieredPricingRules[0].priceCeil > 0
              ">
              券后 {{ "¥" + item.tieredPricingRules[0].priceFloor }}-{{
                "¥" + item.tieredPricingRules[0].priceCeil
              }}
            </div>
            <div class="couponAfterPrice" v-if="
                item.sellingPrice != -1 &&
                  item.tieredPricingRules[0] &&
                  item.tieredPricingRules[0].priceFloor == 0 &&
                  item.tieredPricingRules[0].priceCeil > 0
              ">
              券后{{ "¥" + item.tieredPricingRules[0].priceCeil }}
            </div>
          </div>
        </div>
      </div>
      <div class="null_goods" v-if="this.dataSoures.length == 0">
        <img src="https://image.hezongyy.com/pcimage/119h5/07.png" />
        <!-- <div class="text">暂无活动商品~</div> -->
      </div>
    </van-list>
  </div>
</template>
<script>
import { getRequest } from '@/api/indexGet'
import { postRequest } from '@/api/index'
import url from '@/axios/apiUrl'
export default {
  props: {
    dataSoures: {
      default: []
    },
    type: false,
    finished: {
      type: [Boolean],
      default: false,
    },
    loading: {
      type: [Boolean],
      default: false,
    },
    type: {
      type: [String],
      default: '',
    },
    isPreview: {
      type: [Boolean],
      default: false,
    },
    is119: {
      type: [Boolean],
      default: false,
    },
  },
  data() {
    return {
      priceNode: '',
    }
  },
  created() {},
  mounted() {},
  methods: {
    //阶梯价跳转原生详情页面
    goToDetail(item) {
      window.location.href =
        this.pathURL + 'nativeApp/goodsDetails?id=' + item.id
    },
    load() {
      this.$emit('load')
    },
    showCards(item) {
      this.$emit('showCards', item)
    },
    //集采标识显示
    getLabelImg(labelId) {
      if (labelId == 21)
        return 'https://image.hezongyy.com/pcimage/119h5/h5_cj_new.png'
      if (labelId == 8)
        return 'https://image.hezongyy.com/pcimage/119h5/h5_jm_new.png'
      if (labelId == 6)
        return 'https://image.hezongyy.com/pcimage/119h5/h5_jp_new.png'
      if (labelId == 24)
        return 'https://image.hezongyy.com/pcimage/119h5/h5_yx_new.png'
    },
    getSellingPrice(value) {
      let splitPrice = String(value).split('.')
      if (value == '加盟可见') {
        return `<span style="font-size:16px;position: relative;bottom: 2px;">加盟可见</span>`
      }
      if (!splitPrice[1]) {
        return splitPrice[0]
      } else {
        return `${splitPrice[0]}<span style="font-size:10px;">.${splitPrice[1]}</span>`
      }
    },
  },
}
</script>
<style lang="less" scoped>
.couponAfterPrice1 {
  text-align: center;
  width: 305px;
  opacity: 1;
  color: #fff;
  padding: 2px 0;
  overflow: hidden;
  font-family: PingFangSC, PingFangSC-Regular;
  margin-top: 10px;
  line-height: 36px;
  height: 36px;
  font-size: 24px;
  background: linear-gradient(145deg, #d211d2 0%, #6c29e8 100%);
  border-radius: 30px;
}
.couponAfterPrice {
  text-align: center;
  width: 305px;
  height: 36px;
  line-height: 36px;
  opacity: 1;
  background: #ff540d;
  border-radius: 22px;
  color: #fff;
  padding: 2px 0;
  overflow: hidden;
  font-family: PingFangSC, PingFangSC-Regular;
  margin-top: 5px;
}
/deep/.van-list__finished-text {
  color: #fff;
}

.label_img {
  display: table-cell;
  width: 48px;
  height: 37px;
  line-height: 37px;
  padding-right: 16px;
  .img1 {
    width: 100%;
    height: 100%;
  }
  .img2 {
    width: 106px;
    height: 100%;
  }
}

.ladder_goods_area {
  width: 100%;
  height: calc(100vh - 170px);
  opacity: 1;
  // background: #ffffff;
  overflow: auto;
  box-sizing: border-box;
  .van_list {
    height: 100%;
  }

  .item_block {
    position: relative;
    display: flex;
    margin: 0 24px;
    margin-bottom: 20px;
    border-bottom: 1px solid #f1f1f1;
    height: 360px;
    background: #ffffff;
    border-radius: 22px;
    z-index: 1;
    .box_price {
      position: absolute;
      bottom: 50px;
      left: 10px;
      width: 140px;
      height: 58px;
      font-family: PingFang SC, PingFang SC-Semibold;
      font-weight: 600;
      color: #ffffff;
      z-index: 4;
      text-align: center;
      white-space: nowrap;
      .tip {
        display: inline-block;
        font-size: 20px;
        width: 8px;
        padding-top: 2px;
        z-index: 9;
        vertical-align: top;
      }
      .price {
        position: relative;
        font-size: 38px;
        height: 100%;
        overflow: hidden;
        display: inline-block;
        text-align: left;
      }
    }
    .box {
      position: relative;
      z-index: 3;
      width: 280px;
      height: 280px;
      margin: 20px 10px 60px 10px;
      img {
        width: 272px;
        height: 100%;
      }
      .box_price1 {
        position: absolute;
        bottom: -8px;
        left: 1px;
        width: 140px;
        height: 58px;
        font-family: PingFang SC, PingFang SC-Semibold;
        font-weight: 600;
        color: #ffffff;
        z-index: 99;
        text-align: center;
        white-space: nowrap;
        .tip {
          display: inline-block;
          font-size: 20px;
          width: 8px;
          padding-top: 2px;
          z-index: 9;
          vertical-align: top;
        }
        .price {
          position: relative;
          font-size: 38px;
          height: 100%;
          overflow: hidden;
          display: inline-block;
          text-align: left;
        }
      }
    }
    .left {
      margin: 10px;
      display: inline-block;
      height: 270px;
      width: 270px;
      opacity: 1;
      border-radius: 8px;
      position: absolute;
      flex: 1;
      z-index: 2;

      .tip {
        z-index: 9;
        position: absolute;
        width: 130px;
        height: 130px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        img {
          border: none;
          display: inline-block;
          width: 100%;
          height: 100%;
        }
      }

      img {
        margin-top: 15px;
        width: 100%;
        height: 100%;
      }
    }

    .right {
      margin: 20px 0 20px 0;
      width: 59%;
      height: 280px;
      position: relative;

      .text1 {
        overflow: hidden;
        opacity: 1;
        line-height: 50px;
        height: 42px;
        font-size: 32px;
        font-family: Microsoft YaHei, Microsoft YaHei-Bold;
        font-weight: 700;
        text-align: LEFT;
        padding-bottom: 6px;
        color: #333333;
      }
      .text2 {
        padding-bottom: 3px;
        overflow: hidden;
        opacity: 1;
        line-height: 34px;
        height: 34px;
        font-size: 26px;
        font-family: Microsoft YaHei, Microsoft YaHei-Regular;
        font-weight: 400;
        text-align: LEFT;
        color: #666666;
      }

      .text31 {
        height: 37px;
        line-height: 37px;
        margin-top: 10px;
        display: flex;
        .zxj119 {
          padding: 0 10px;
          font-size: 22px;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: 400;
          text-align: center;
          color: #ffffff;
          width: 110px;
          height: 32px;
          line-height: 32px;
          background: linear-gradient(103deg, #d211d2 0%, #6c29e8 100%);
          border-radius: 30px;
        }
        .num {
          width: auto;
          height: 32px;
          line-height: 32px;
          font-size: 32px;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: 400;
          text-align: LEFT;
          background-image: linear-gradient(104deg, #d211d2 0%, #6c29e8 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          padding-right: 15px;
          padding-left: 15px;
        }

        .num1 {
          flex: 1;
          overflow: hidden;
          margin-right: 10px;
          height: 32px;
          line-height: 32px;
          font-size: 22px;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: 400;
          text-decoration: line-through;
          text-align: LEFT;
          color: #666666;
        }

        .btn {
          position: absolute;
          right: 20px;
          bottom: -30px;
          display: inline-block;
          height: 60px;
          width: 60px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .text3 {
        height: 37px;
        line-height: 37px;
        margin-top: 10px;
        .num {
          height: 35px;
          line-height: 35px;
          width: auto;
          opacity: 1;
          font-size: 32px;
          font-family: PingFang, PingFang-Medium;
          font-weight: 500;
          text-align: left;
          color: #f34444;
          padding-right: 15px;
        }

        .num1 {
          width: auto;
          opacity: 1;
          font-size: 26px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-decoration: line-through;
          text-align: left;
          color: #999999;
          height: 37px;
          line-height: 37px;
        }

        .btn {
          position: absolute;
          right: 20px;
          bottom: -30px;
          display: inline-block;
          height: 60px;
          width: 60px;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
.null_goods {
  position: relative;
  // top: 50%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 426px;
  height: 399px;

  img {
    width: 100%;
    height: 100%;
  }

  .text {
    width: auto;
    height: 39px;
    opacity: 1;
    font-size: 28px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: CENTER;
    color: #000000;
  }
}
</style>
